//------------------------------ 滑动轮播图 ----------------------------------\\

// 获取元素
let bannerEl = document.querySelector('.banner');
let picturesEl = document.querySelector('.pictures');
let picList = document.querySelectorAll('.pic');
// 获取小圆点
let dotList = document.querySelectorAll('.dot');
// 默认当前内容id
let currentIndex = 0;
let picIndex = currentIndex + 1;
let timer = null;
dotList.forEach((item,index) =>{
    item.dataset.index = index;
})
picList.forEach((item,index) =>{
    item.dataset.index = index;
})
// 向左滑动
bannerEl.addEventListener('touchstart',function(e){
    clearInterval(timer);
    let targetEl =e.target;
    
    // console.log(targetEl.closest('.pic').dataset.index);
    let startPageX = e.touches[0].pageX;
    bannerEl.addEventListener('touchmove',function(e){
        let movePageX = e.touches[0].pageX;
        let test = movePageX / 37.5- startPageX / 37.5

        // console.log(movePageX / 375 );
        picturesEl.style.left = `${-picIndex * 10 + test}rem`

        // if (startPageX > movePageX) {
        //     moveDx = (movePageX - startPageX)/375;
        //     // console.log(moveDx);
        //     totalDx = -picIndex * 10 ;
        //     if(moveDx<2){
        //         picIndex++;
        //     }
        //     picturesEl.style.left = `${totalDx}rem`;
        // }
    })
})
bannerEl.ontouchend = function () {
    autoPlay();
}


function changeContent(){
    picturesEl.style.transition = '.5s linear'
    // 小圆点移动
    dotList[currentIndex].classList.remove('active');
    currentIndex++;
    picIndex++;
    if(currentIndex > 2){
        currentIndex = 0;
    } 
    picturesEl.style.left = `${-picIndex * 10}rem`
    dotList[currentIndex].classList.add('active');

    picturesEl.addEventListener('transitionend',function(){
        if (picIndex == picList.length - 1) {
            picturesEl.style.transition = '0s';
            picturesEl.style.left = '-10rem';
            picIndex = 1;
        }
    })
}

// 自动轮播设置
function autoPlay() {
    timer = setInterval(() =>{
        changeContent()
    }, 2000)
}
autoPlay();